



<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#FFF">
  <link rel="apple-touch-icon" sizes="180x180" href="/fu-xiaochen/images/apple-touch-icon.png">

<link rel="icon" type="image/ico" sizes="32x32" href="/fu-xiaochen/images/favicon.ico">
  <meta http-equiv="Cache-Control" content="no-transform">
  <meta http-equiv="Cache-Control" content="no-siteapp">


<link rel="alternate" type="application/rss+xml" title="小付博客" href="http://fu-xiaochen1.gitee.io/fu-xiaochen/rss.xml" />
<link rel="alternate" type="application/atom+xml" title="小付博客" href="http://fu-xiaochen1.gitee.io/fu-xiaochen/atom.xml" />
<link rel="alternate" type="application/json" title="小付博客" href="http://fu-xiaochen1.gitee.io/fu-xiaochen/feed.json" />

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Mulish:300,300italic,400,400italic,700,700italic%7CFredericka%20the%20Great:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20JP:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20SC:300,300italic,400,400italic,700,700italic%7CInconsolata:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">

<link rel="stylesheet" href="/fu-xiaochen/css/app.css?v=0.2.5">

  

<link rel="canonical" href="http://fu-xiaochen1.gitee.io/fu-xiaochen/2021/11/17/vue.js/">



  <title>
Vue |
Yume Shoka = 小付博客</title>
<meta name="generator" content="Hexo 6.0.0"></head>
<body itemscope itemtype="http://schema.org/WebPage">
  <div id="loading">
    <div class="cat">
      <div class="body"></div>
      <div class="head">
        <div class="face"></div>
      </div>
      <div class="foot">
        <div class="tummy-end"></div>
        <div class="bottom"></div>
        <div class="legs left"></div>
        <div class="legs right"></div>
      </div>
      <div class="paw">
        <div class="hands left"></div>
        <div class="hands right"></div>
      </div>
    </div>
  </div>
  <div id="container">
    <header id="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="inner">
        <div id="brand">
          <div class="pjax">
          
  <h1 itemprop="name headline">Vue
  </h1>
  
<div class="meta">
  <span class="item" title="创建时间：2021-11-17 20:13:00">
    <span class="icon">
      <i class="ic i-calendar"></i>
    </span>
    <span class="text">发表于</span>
    <time itemprop="dateCreated datePublished" datetime="2021-11-17T20:13:00+08:00">2021-11-17</time>
  </span>
</div>


          </div>
        </div>
        <nav id="nav">
  <div class="inner">
    <div class="toggle">
      <div class="lines" aria-label="切换导航栏">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
      </div>
    </div>
    <ul class="menu">
      <li class="item title"><a href="/fu-xiaochen/" rel="start">Yume Shoka</a></li>
    </ul>
    <ul class="right">
      <li class="item theme">
        <i class="ic i-sun"></i>
      </li>
      <li class="item search">
        <i class="ic i-search"></i>
      </li>
    </ul>
  </div>
</nav>

      </div>
      <div id="imgs" class="pjax">
        <ul>
          <li class="item" data-background-image="https://tva2.sinaimg.cn/large/6833939bly1giclga70tsj20zk0m84mr.jpg"></li>
          <li class="item" data-background-image="https://tva2.sinaimg.cn/large/6833939bly1giciundwu5j20zk0m8n9e.jpg"></li>
          <li class="item" data-background-image="https://tva2.sinaimg.cn/large/6833939bly1gipetfk5zwj20zk0m8e81.jpg"></li>
          <li class="item" data-background-image="https://tva2.sinaimg.cn/large/6833939bly1gicitf0kl1j20zk0m87fe.jpg"></li>
          <li class="item" data-background-image="https://tva2.sinaimg.cn/large/6833939bly1gipesng5oej20zk0m87d4.jpg"></li>
          <li class="item" data-background-image="https://tva2.sinaimg.cn/large/6833939bly1giclx6phq6j20zk0m8e36.jpg"></li>
        </ul>
      </div>
    </header>
    <div id="waves">
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" />
          <use xlink:href="#gentle-wave" x="48" y="3" />
          <use xlink:href="#gentle-wave" x="48" y="5" />
          <use xlink:href="#gentle-wave" x="48" y="7" />
        </g>
      </svg>
    </div>
    <main>
      <div class="inner">
        <div id="main" class="pjax">
          
  <div class="article wrap">
    
<div class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
<i class="ic i-home"></i>
<span><a href="/fu-xiaochen/">首页</a></span>
</div>

    <article itemscope itemtype="http://schema.org/Article" class="post block" lang="zh-CN">
  <link itemprop="mainEntityOfPage" href="http://fu-xiaochen1.gitee.io/fu-xiaochen/2021/11/17/vue.js/">

  <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="image" content="/fu-xiaochen/images/avatar.jpg">
    <meta itemprop="name" content="John Doe">
    <meta itemprop="description" content=", ">
  </span>

  <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="小付博客">
  </span>

  <div class="body md" itemprop="articleBody">
    

    <hr>
<h1 id="vuejs"><a class="markdownIt-Anchor" href="#vuejs">#</a> vue.js</h1>
<h2 id="什么是vuejs"><a class="markdownIt-Anchor" href="#什么是vuejs">#</a> 什么是 vue.js</h2>
<ul>
<li>
<p>vue.js 是目前最火的前端框架，React 是最流行的前端框架（React 除了网站开发，还可以开发手机 App,Vue 语法也是可以用于手机 App 开发的，需要借助于 Week)</p>
</li>
<li>
<p>Vue.js 是前端的<strong>主流框架之一</strong>，和 Angular.js,React.js 一起，并成为前端三大主流框架！</p>
</li>
<li>
<p>Vue.js 是一套构建用户界面的框架，<strong>只关注视图层</strong>，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue 有配套的第三方类库，可以整合起来做大型项目的开发）</p>
</li>
<li>
<p>前端的主要工作？</p>
<p>主要负责 MVC 中的 V 这一层；主要工作就是和界面打交道，来制作前端页面效果；</p>
</li>
</ul>
<h2 id="为什么要学习流行框架"><a class="markdownIt-Anchor" href="#为什么要学习流行框架">#</a> 为什么要学习流行框架</h2>
<ul>
<li>
<p>使用框架能够提高开发效率</p>
</li>
<li>
<p>Vue.js (能够帮助我们减少不必要的 DOM 操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心 DOM 是如何渲染的了】)</p>
</li>
<li>
<p>在 Vue 中一个核心的概念，就是让程序员不在操作 DOM 元素，解放了程序员的双手，让程序员更好的去关注业务逻辑。</p>
</li>
</ul>
<h2 id="框架和库的区别"><a class="markdownIt-Anchor" href="#框架和库的区别">#</a> 框架和库的区别</h2>
<ul>
<li>
<p>框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。</p>
</li>
<li>
<p>库（插件）：提供某一个小功能，对项目的侵入性较小，如果整个库无法完成某些需求，可以很容易切换到其他库实现需求。</p>
<ul>
<li>1. 从 Jquery 切换到 Zepto</li>
<li>2. 从 EJS 切换到 art-template</li>
</ul>
</li>
</ul>
<h2 id="mvc和mvvm视图讲解图"><a class="markdownIt-Anchor" href="#mvc和mvvm视图讲解图">#</a> MVC 和 MVVM 视图讲解图</h2>
<p><img data-src="C:%5CUsers%5C%E4%BB%98%E6%99%93%E6%99%A8%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20211019173904606.png" alt="image-20211019173904606"></p>
<h2 id="vue中mvvm基本代码"><a class="markdownIt-Anchor" href="#vue中mvvm基本代码">#</a> vue 中 MVVM 基本代码</h2>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&lt;!<span class="variable constant_">DOCTYPE</span> html&gt;</span><br><span class="line">&lt;html lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;</span><br><span class="line">    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;/title&gt;</span><br><span class="line">    &lt;!-- 导入vue包 --&gt;</span><br><span class="line">    &lt;script src=&quot;./lib/vue.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;!-- 将来new的Vue实例，会控制这个元素的所有内容 --&gt;</span><br><span class="line">    &lt;!-- vue 实例所控制的这个元素区域，就是我们的 V --&gt;</span><br><span class="line">    &lt;div id=&quot;app&quot;&gt;</span><br><span class="line">        &lt;p&gt;&#123;&#123; msg &#125;&#125;&lt;/p&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;script&gt; </span><br><span class="line">    //创建一个vue实例</span><br><span class="line">    //当我们导入包之后，在浏览器的内存中就多了一个vue构造函数</span><br><span class="line">    //注意:我们new出来的这个vm对象，就是我们MVVM中的VM调度者</span><br><span class="line">        var vm = new Vue(&#123;</span><br><span class="line">            el:&#x27;#app&#x27;,//表示，当我们new的这个Vue实例，要控制页面上的哪一个区域</span><br><span class="line">            //这里的data就是MVVM中M，专门保存每个页面的数据的</span><br><span class="line">            data:&#123; //data属性中，存放的el中要用到的数据</span><br><span class="line">                msg: &#x27;欢迎学习vue&#x27;//通过vue提供指令，很方便的就能把数据渲染到页面上，程序员不需要手动操作DOM元素了【前端的vue之类的框架，不提倡我们去手动操作DOM元素了】</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">    </span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<h3 id="v-cloalv-text-v-html的使用"><a class="markdownIt-Anchor" href="#v-cloalv-text-v-html的使用">#</a> v-cloal,v-text ,v-html 的使用</h3>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line">&lt;!<span class="variable constant_">DOCTYPE</span> html&gt;</span><br><span class="line">&lt;html lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;</span><br><span class="line">    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;/title&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        [v-cloak]&#123;</span><br><span class="line">            display: none;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id=&quot;app&quot;&gt;</span><br><span class="line">        &lt;!-- 使用v-cloak能够解决插值表达式闪烁的问题 --&gt;</span><br><span class="line">        &lt;p v-cloak&gt;&#123;&#123; msg &#125;&#125;&lt;/p&gt; </span><br><span class="line">        </span><br><span class="line">        &lt;!-- 默认v-text是没有闪烁问题的 --&gt;</span><br><span class="line">        &lt;!-- v-text会覆盖元素中原本的内容，但是插值表达式只会替代自己的占位符，不会把整个元素的内容清空 --&gt;</span><br><span class="line">        &lt;h4 v-text=&quot;msg&quot;&gt;&lt;/h4&gt;</span><br><span class="line"></span><br><span class="line">        &lt;div&gt;&#123;&#123; msg2 &#125;&#125;&lt;/div&gt;</span><br><span class="line">        &lt;div v-text=&#x27;msg2&#x27;&gt;&lt;/div&gt;</span><br><span class="line">        &lt;div v-html=&#x27;msg2&#x27;&gt;&lt;/div&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;script src=&quot;./lib/vue.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        var vm = new Vue(&#123;</span><br><span class="line">            el: &#x27;#app&#x27;,</span><br><span class="line">            data: &#123;</span><br><span class="line">                msg: &#x27;123&#x27;,</span><br><span class="line">                msg2: &#x27;&lt;h1&gt;哈哈&lt;/h1&gt;&#x27;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    </span><br><span class="line">  &lt;/script&gt;  </span><br><span class="line">  &lt;/body&gt;</span><br><span class="line">  &lt;/html&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p><img data-src="C:%5CUsers%5C%E4%BB%98%E6%99%93%E6%99%A8%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20211019225553405.png" alt="image-20211019225553405"></p>
<h3 id="v-bind-vue提供的属性绑定机制-缩写为"><a class="markdownIt-Anchor" href="#v-bind-vue提供的属性绑定机制-缩写为">#</a> v-bind vue 提供的属性绑定机制   缩写为 ：</h3>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- v-<span class="attr">bind</span>: 是vue中提供的用于绑定属性的指令 --&gt;</span><br><span class="line">       &lt;!-- &lt;input type=&quot;button&quot; value=&quot;按钮&quot; v-bind:title=&quot;mytitle&quot;&gt; --&gt;</span><br><span class="line">       &lt;!-- 注意：v-bind: 指令可以被简写成 :要绑定的属性 --&gt;</span><br><span class="line">       &lt;!-- v-bind中，可以写合法的JS表达式 --&gt;</span><br><span class="line">       &lt;input type=&quot;button&quot; value=&quot;按钮&quot; :title=&quot;mytitle&quot;&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">            <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">            <span class="attr">data</span>: &#123;</span><br><span class="line">                <span class="attr">msg</span>: <span class="string">&#x27;123&#x27;</span>,</span><br><span class="line">                <span class="attr">msg2</span>: <span class="string">&#x27;&lt;h1&gt;哈哈&lt;/h1&gt;&#x27;</span>,</span><br><span class="line">                <span class="attr">mytitle</span>: <span class="string">&#x27;玛卡巴卡&#x27;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br></pre></td></tr></table></figure>
<p>只有用 v-bind: 绑定 title 才能使用 mytitle 中的属性 ——’玛卡巴卡’。</p>
<h3 id="v-on-事件绑定机制缩写"><a class="markdownIt-Anchor" href="#v-on-事件绑定机制缩写">#</a> v-on: 事件绑定机制缩写：@</h3>
<ol>
<li></li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">&lt;!-- <span class="title class_">Vue</span>中提供了v-<span class="attr">on</span>: 事件绑定机制 --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;按钮&quot;</span> <span class="attr">v-on:click</span>=<span class="string">&quot;show&quot;</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">methods</span>: &#123;</span><br><span class="line">               <span class="attr">show</span>: <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">                   <span class="title function_">alert</span>(<span class="string">&quot;hello&quot;</span>)</span><br><span class="line">               &#125;</span><br><span class="line">           &#125;</span><br></pre></td></tr></table></figure>
<ol start="2">
<li></li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;input type=<span class="string">&quot;button&quot;</span> value=<span class="string">&quot;按钮&quot;</span> v-<span class="attr">bind</span>:title=<span class="string">&quot;mytitle&quot;</span> id=<span class="string">&quot;btn&quot;</span>&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&#x27;btn&#x27;</span>).<span class="property">onclick</span>= <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">            <span class="title function_">alert</span>(<span class="string">&quot;Hello&quot;</span>)</span><br><span class="line">        &#125;</span><br></pre></td></tr></table></figure>
<p>这两种方法功能一样</p>
<p>第一种方法 Vue 提供的方法</p>
<h3 id="v-model实现数据的双向绑定"><a class="markdownIt-Anchor" href="#v-model实现数据的双向绑定">#</a> v-model 实现数据的双向绑定</h3>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">&lt;body&gt;</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        </span></span><br><span class="line"><span class="language-xml">         <span class="tag">&lt;<span class="name">h4</span>&gt;</span> &#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">h4</span>&gt;</span>  </span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">        <span class="comment">&lt;!-- v-bind: 只能实现数据的单向绑定，从M自动绑定到V,无法实现数据的双向绑定 --&gt;</span></span></span><br><span class="line"><span class="language-xml">         <span class="comment">&lt;!-- &lt;input type=&quot;text&quot;  :value=&quot;msg&quot; style=&quot;width: 100%;&quot;&gt; --&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">         <span class="comment">&lt;!-- 使用 v-model指令，可以实现 表单元素和Model中数据的双向绑定 --&gt;</span></span></span><br><span class="line"><span class="language-xml">         <span class="comment">&lt;!-- input(radio,text,address,email...) select    checkbok   textarea --&gt;</span></span></span><br><span class="line"><span class="language-xml">         <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">style</span>=<span class="string">&quot;width: 100%;&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;msg&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">       </span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span> (&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">el</span>: <span class="string">&quot;#app&quot;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">data</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">msg</span>: <span class="string">&#x27;大家都是好学生，爱敲代码。&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    </span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<h2 id="跑马灯效果源码"><a class="markdownIt-Anchor" href="#跑马灯效果源码">#</a> 跑马灯效果源码</h2>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line">&lt;!<span class="variable constant_">DOCTYPE</span> html&gt;</span><br><span class="line">&lt;html lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;</span><br><span class="line">    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;/title&gt;</span><br><span class="line">    &lt;!-- 导入vue包 --&gt;</span><br><span class="line">    &lt;script src=&quot;./lib/vue.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id=&quot;app&quot;&gt;</span><br><span class="line">        &lt;input type=&quot;button&quot; value=&quot;浪起来&quot; @click=&quot;lang&quot;&gt;</span><br><span class="line">        &lt;input type=&quot;button&quot; value=&quot;低调&quot; @click=&quot;stop&quot;&gt;</span><br><span class="line">        &lt;h4&gt;&#123;&#123; msg &#125;&#125;&lt;/h4&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        //注意：在VM实例中，如果想要获取data上的数据，或者想要调用methods中的方法必须通过this.数据属性名 或 this.方法名来进行访问，这里的this就表示我们new出来的VM实例对象</span><br><span class="line">        </span><br><span class="line">        var vm = new Vue(&#123;</span><br><span class="line">            el: &quot;#app&quot;,</span><br><span class="line"></span><br><span class="line">            data: &#123;</span><br><span class="line">                msg: &quot;猥琐发育，别浪~~！&quot;,</span><br><span class="line">                intervalId: null //在data定义定时器Id</span><br><span class="line">            &#125;,</span><br><span class="line">            methods: &#123;</span><br><span class="line">                lang()&#123;</span><br><span class="line">                    if(this.intervalId !=null) return;</span><br><span class="line"></span><br><span class="line">                   this.intervalId =  setInterval(() =&gt; &#123;</span><br><span class="line">                    console.log(this.msg);</span><br><span class="line">                    //获取头的第一个字符</span><br><span class="line">                    var start = this.msg.substring(0,1);</span><br><span class="line">                    //获取后面的所有字符</span><br><span class="line">                    var end = this.msg.substring(1);</span><br><span class="line">                    //重新获得新的字符串，并赋值给 this.msg</span><br><span class="line">                    this.msg = end + start;</span><br><span class="line"></span><br><span class="line">                    //注意：VM实例，会监听到自己身上data中所有的数据的改变，只要数据一发生改变，就会把最新的数据，从data上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】</span><br><span class="line">                       </span><br><span class="line">                   &#125;, 400)</span><br><span class="line">                &#125;,</span><br><span class="line">                stop() &#123;//停止定时器</span><br><span class="line">                clearInterval(this.intervalId);</span><br><span class="line">                //每次将定时器清除了需要把this.intervalID重新置为null</span><br><span class="line">                this.intervalId = null;</span><br><span class="line"></span><br><span class="line">            &#125;</span><br><span class="line">            &#125;</span><br><span class="line">           </span><br><span class="line">        &#125;)</span><br><span class="line">        //分析</span><br><span class="line">        //1.给【浪起来】按钮绑定一个点击事件 v-on   @</span><br><span class="line">        //2.在按钮的事件处理 函数中，写相关的业务逻辑代码：拿到msg中的字符串，然后调用substring来进行字符串的截取操作，把第一个字符截取出来，放到最后一个位置即可；</span><br><span class="line">        //3.未来实现点击下按钮，自动截取功能，需要把2步骤中的代码，放到一个定时器中去；</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">    </span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<h2 id="事件修饰符"><a class="markdownIt-Anchor" href="#事件修饰符">#</a> 事件修饰符</h2>
<ol>
<li>
<p>stop 阻止冒泡</p>
<p>2. 使用 .prevent 阻止默认行为</p>
</li>
<li>
<p>使用 .capture 实现捕获触发事件的机制</p>
</li>
<li>
<p>使用 .slef 实现只有点击当前元素的时候，才会触发事件处理函数</p>
</li>
<li>
<p>使用 .once 只触发一次事件处理函数</p>
</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br></pre></td><td class="code"><pre><span class="line">&lt;!<span class="variable constant_">DOCTYPE</span> html&gt;</span><br><span class="line">&lt;html lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;</span><br><span class="line">    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;/title&gt;</span><br><span class="line">    &lt;script src=&quot;./lib/vue.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        .inner&#123;</span><br><span class="line">            height: 150px;</span><br><span class="line">            background-color: darkcyan;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;div id=&quot;app&quot;&gt;</span><br><span class="line">        &lt;!-- &lt;div class=&quot;inner&quot; @click=&quot;div1Handler&quot;&gt;  --&gt;</span><br><span class="line">             &lt;!-- .stop 阻止冒泡  --&gt;</span><br><span class="line">            &lt;!-- &lt;input type=&quot;button&quot; value=&quot;戳它&quot; @click.stop=&quot;btnHandler&quot;&gt;</span><br><span class="line">        &lt;/div&gt; --&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        &lt;!-- 使用 .prevent阻止默认行为 --&gt;</span><br><span class="line">        &lt;!-- &lt;a href=&quot;http://www.baidu.com&quot; @click.prevent=&quot;linkClick&quot;&gt;有问题，找百度&lt;/a&gt; --&gt;</span><br><span class="line"></span><br><span class="line">        </span><br><span class="line">               &lt;!-- 使用 .capture 实现捕获触发事件的机制  --&gt;</span><br><span class="line">         &lt;!-- &lt;div class=&quot;inner&quot; @click.capture=&quot;div1Handler&quot;&gt; </span><br><span class="line">             &lt;input type=&quot;button&quot; value=&quot;戳它&quot; @click.stop=&quot;btnHandler&quot;&gt;</span><br><span class="line">        &lt;/div&gt;  --&gt;</span><br><span class="line"></span><br><span class="line">         &lt;!-- 使用 .slef 实现只有点击当前元素的时候，才会触发事件处理函数 --&gt;</span><br><span class="line">        &lt;!-- &lt;div class=&quot;inner&quot; @click.slef=&quot;div1Handler&quot;&gt; </span><br><span class="line">            &lt;input type=&quot;button&quot; value=&quot;戳它&quot; @click.stop=&quot;btnHandler&quot;&gt;</span><br><span class="line">       &lt;/div&gt;  --&gt;</span><br><span class="line"></span><br><span class="line">       &lt;!--使用 .once只触发一次事件处理函数 --&gt;</span><br><span class="line">        &lt;a href=&quot;http://www.baidu.com&quot; @click.prevent.once=&quot;linkClick&quot;&gt;有问题，找百度&lt;/a&gt;</span><br><span class="line"></span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        var vm =  new Vue(&#123;</span><br><span class="line">            el: &quot;#app&quot;,</span><br><span class="line">            data: &#123;</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line">            methods: &#123;</span><br><span class="line">                div1Handler()&#123;</span><br><span class="line">                    console.log(&quot;这是触发了inner div的点击事件&quot;);</span><br><span class="line">                &#125;,</span><br><span class="line"></span><br><span class="line">                btnHandler()&#123;</span><br><span class="line">                    console.log(&quot;这是触发了btn 按钮的点击事件&quot;)</span><br><span class="line">                &#125;,</span><br><span class="line"></span><br><span class="line">                linkClick()&#123;</span><br><span class="line">                    console.log(&quot;触发了事件&quot;)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        </span><br><span class="line">        &#125;)</span><br><span class="line"></span><br><span class="line">        </span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">    </span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<h2 id="简单计算器"><a class="markdownIt-Anchor" href="#简单计算器">#</a> 简单计算器</h2>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line">&lt;!<span class="variable constant_">DOCTYPE</span> html&gt;</span><br><span class="line">&lt;html lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;</span><br><span class="line">    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;/title&gt;</span><br><span class="line">    &lt;script src=&quot;./lib/vue.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line"></span><br><span class="line">    &lt;div id=&quot;app&quot;&gt;</span><br><span class="line">    </span><br><span class="line">        &lt;input type=&quot;text&quot; v-model=&quot;n1&quot;&gt;</span><br><span class="line"></span><br><span class="line">        &lt;select v-model=&quot;ptn&quot;&gt;</span><br><span class="line">            &lt;option value=&quot;+&quot;&gt;+&lt;/option&gt;</span><br><span class="line">            &lt;option value=&quot;-&quot;&gt;-&lt;/option&gt;</span><br><span class="line">            &lt;option value=&quot;*&quot;&gt;*&lt;/option&gt;</span><br><span class="line">            &lt;option value=&quot;/&quot;&gt;/&lt;/option&gt;</span><br><span class="line">        &lt;/select&gt;</span><br><span class="line"></span><br><span class="line">        &lt;input type=&quot;text&quot; v-model=&quot;n2&quot;&gt;</span><br><span class="line">        &lt;input type=&quot;button&quot; value=&quot;=&quot; @click=&quot;calc&quot;&gt;</span><br><span class="line">        &lt;input type=&quot;text&quot; v-model=&quot;result&quot;&gt;</span><br><span class="line"></span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        var vm = new Vue(&#123;</span><br><span class="line">            el: &quot;#app&quot;,</span><br><span class="line">            data :&#123;</span><br><span class="line">                n1: 0,</span><br><span class="line">                n2: 0,</span><br><span class="line">                result: 0,</span><br><span class="line">                ptn: &#x27;+&#x27;,</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line">            methods:&#123;</span><br><span class="line">                calc()&#123;</span><br><span class="line">                //第一种方式</span><br><span class="line">                //     switch(this.ptn)&#123;</span><br><span class="line">                //         case &#x27;+&#x27;:</span><br><span class="line">                //         this.result = parseInt(this.n1)+parseInt(this.n2);</span><br><span class="line">                //             break;</span><br><span class="line">                //         case &#x27;-&#x27;:</span><br><span class="line">                //         this.result = parseInt(this.n1)-parseInt(this.n2);</span><br><span class="line">                //             break;</span><br><span class="line">                //         case &#x27;*&#x27;:</span><br><span class="line">                //         this.result = parseInt(this.n1)*parseInt(this.n2);</span><br><span class="line">                //             break;</span><br><span class="line">                //         case &#x27;/&#x27;:</span><br><span class="line">                //         this.result = parseInt(this.n1)/parseInt(this.n2);</span><br><span class="line">                //             break;</span><br><span class="line">                //     &#125;</span><br><span class="line">                // &#125;</span><br><span class="line">                    </span><br><span class="line">                    </span><br><span class="line">				//第二种方式</span><br><span class="line">                //注意这是投机取巧的方式，在正式开发中尽量少用</span><br><span class="line">                var codeStr = &quot;parseInt(this.n1)&quot;+ this.ptn + &quot;parseInt(this.n2)&quot;</span><br><span class="line"></span><br><span class="line">                this.result = eval(codeStr)</span><br><span class="line"></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<h2 id="vue-样式"><a class="markdownIt-Anchor" href="#vue-样式">#</a> vue 样式</h2>
<h3 id="vue样式一"><a class="markdownIt-Anchor" href="#vue样式一">#</a> vue 样式一</h3>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line">&lt;!<span class="variable constant_">DOCTYPE</span> html&gt;</span><br><span class="line">&lt;html lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;</span><br><span class="line">    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;/title&gt;</span><br><span class="line">    &lt;script src=&quot;./lib/vue.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        .red&#123;</span><br><span class="line">            color: red;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        .thin&#123;</span><br><span class="line">            font-weight: 200;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        .italic&#123;</span><br><span class="line">            /* 设置字体倾斜 */</span><br><span class="line">            font-style: italic;</span><br><span class="line">        &#125;</span><br><span class="line">        .active&#123;</span><br><span class="line">            /* 设置字的间距 */</span><br><span class="line">            letter-spacing: 0.5em;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line"></span><br><span class="line">   </span><br><span class="line">    &lt;div id=&quot;app&quot;&gt;</span><br><span class="line">        &lt;h1&gt;&#123;&#123; msg &#125;&#125;&lt;/h1&gt;</span><br><span class="line">        &lt;!-- &lt;h1 class=&quot;red thin&quot;&gt;是绝对不会是部分&lt;/h1&gt; --&gt;</span><br><span class="line"></span><br><span class="line">        &lt;!-- 第一种方式，直接传递一种数组，注意：这里的class需要使用 v-bind:数据绑定 --&gt;</span><br><span class="line">        &lt;!-- &lt;h1 v-bind:class=&quot;[&#x27;thin&#x27;,&#x27;italic&#x27;]&quot;&gt;是绝对不会是部分&lt;/h1&gt; --&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        &lt;!-- 在数组中使用三元表达式 --&gt;</span><br><span class="line">        </span><br><span class="line">        &lt;!-- &lt;h1 :class=&quot;[&#x27;thin&#x27;,&#x27;italic&#x27;,flag?&#x27;active&#x27;:&#x27;&#x27;]&quot;&gt;是绝对不会是部分&lt;/h1&gt; --&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        &lt;!-- 在数组中使用 对象来代替三元表达式，提高代码的可读性 --&gt;</span><br><span class="line">        &lt;!-- &lt;h1 :class=&quot;[&#x27;thin&#x27;,&#x27;italic&#x27;,&#123;&#x27;active&#x27;:flag&#125;]&quot;&gt;是绝对不会是部分&lt;/h1&gt; --&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        &lt;!-- 在为class使用v-bind:绑定对象的时候，对象的属性是类名，由于对象的属性可带引号，也可以不带引号，所以这里我们没带引号，属性的值是一个标识符 --&gt;</span><br><span class="line">        &lt;h1 :class=&quot;classObj&quot;&gt;是绝对不会是部分&lt;/h1&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">    var vm = new Vue(&#123;</span><br><span class="line">        el:&quot;#app&quot;,</span><br><span class="line">        data: &#123;</span><br><span class="line">            flag: &#x27;true&#x27;,</span><br><span class="line">            classObj: &#123;red: true,thin:true,italic:true,active:false&#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        </span><br><span class="line">        methods: &#123;&#125;</span><br><span class="line">        &#125;);</span><br><span class="line"></span><br><span class="line">    </span><br><span class="line">&lt;/script&gt;</span><br><span class="line">    </span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<h3 id="vue样式二"><a class="markdownIt-Anchor" href="#vue样式二">#</a> vue 样式二</h3>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=<span class="string">&quot;app&quot;</span>&gt;</span><br><span class="line">       &lt;!--对象就是无序键值对的集合，对象有短横线是使用引号  --&gt;</span><br><span class="line">       <span class="language-xml"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">:style</span>=<span class="string">[styleObj1,styleObj2]</span>&gt;</span>记得发货的房间<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">       </span><br><span class="line">   &lt;/div&gt;</span><br><span class="line"></span><br><span class="line">   <span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           <span class="attr">el</span>:<span class="string">&#x27;#app&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           <span class="attr">data</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">               <span class="attr">styleObj1</span>:&#123;<span class="attr">color</span>:<span class="string">&#x27;red&#x27;</span>,<span class="string">&#x27;font-weight&#x27;</span>:<span class="number">200</span>&#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">               <span class="attr">styleObj2</span>:&#123;<span class="string">&#x27;font-style&#x27;</span>:<span class="string">&#x27;italic&#x27;</span>&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           <span class="attr">methods</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">   </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<h2 id="v-for的四种使用方式"><a class="markdownIt-Anchor" href="#v-for的四种使用方式">#</a> v-for 的四种使用方式</h2>
<h3 id="v-for循环普通数组"><a class="markdownIt-Anchor" href="#v-for循环普通数组">#</a> v-for 循环普通数组</h3>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=<span class="string">&quot;app&quot;</span>&gt;</span><br><span class="line"></span><br><span class="line">       <span class="language-xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">&quot;(item, i) in list&quot;</span>&gt;</span> 索引：&#123;&#123;i&#125;&#125;，第&#123;&#123; i+1 &#125;&#125;项：&#123;&#123; item &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">   &lt;/div&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">   <span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           <span class="attr">el</span>:<span class="string">&#x27;#app&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           <span class="attr">data</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">               <span class="attr">list</span>: [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           <span class="attr">method</span>: &#123;&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">   </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<h3 id="v-for-循环对象数组"><a class="markdownIt-Anchor" href="#v-for-循环对象数组">#</a> v-for 循环对象数组</h3>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=<span class="string">&quot;app&quot;</span>&gt;</span><br><span class="line">       <span class="language-xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">&#x27;(user,i) in list&#x27;</span>&gt;</span>编号为：&#123;&#123; user.id &#125;&#125;，姓名：&#123;&#123; user.name &#125;&#125;，索引为：&#123;&#123; i &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">   &lt;/div&gt;</span><br><span class="line">   <span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           <span class="attr">data</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">               <span class="attr">list</span>: [</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                   &#123;<span class="attr">id</span>: <span class="number">1</span>,<span class="attr">name</span>: <span class="string">&#x27;付晓晨&#x27;</span>&#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                   &#123;<span class="attr">id</span>: <span class="number">2</span>,<span class="attr">name</span>: <span class="string">&#x27;付晓晨&#x27;</span>&#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                   &#123;<span class="attr">id</span>: <span class="number">3</span>,<span class="attr">name</span>: <span class="string">&#x27;付晓晨&#x27;</span>&#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                   &#123;<span class="attr">id</span>: <span class="number">4</span>,<span class="attr">name</span>: <span class="string">&#x27;付晓晨&#x27;</span>&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">               ]</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           <span class="attr">methods</span>:&#123;&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">   </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<h3 id="v-for-循环对象"><a class="markdownIt-Anchor" href="#v-for-循环对象">#</a> v-for 循环对象</h3>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=<span class="string">&quot;app&quot;</span>&gt;</span><br><span class="line">       &lt;!-- 注意：在遍历对象的键值对的时候，除了有 value key 还有一个索引 i --&gt;</span><br><span class="line">       <span class="language-xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">&#x27;(value,key ,i) in user&#x27;</span>&gt;</span> &#123;&#123; value &#125;&#125; ---- &#123;&#123; key &#125;&#125; ---&#123;&#123; i &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">   &lt;/div&gt;</span><br><span class="line"></span><br><span class="line">   <span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           <span class="attr">data</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">               <span class="attr">user</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                   <span class="attr">id</span>: <span class="number">1</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                   <span class="attr">name</span>: <span class="string">&#x27;付晓晨&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                   <span class="attr">gender</span>: <span class="string">&#x27;男&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">               &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">           <span class="attr">methods</span>:&#123;&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">       &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">   </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<h3 id="v-for-数字的迭代"><a class="markdownIt-Anchor" href="#v-for-数字的迭代">#</a> v-for 数字的迭代</h3>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=<span class="string">&quot;app&quot;</span>&gt;</span><br><span class="line"></span><br><span class="line">        &lt;!-- <span class="keyword">in</span> 后面我们可以放普通数组，对象数组，对象，还可以放数字 --&gt;</span><br><span class="line">        &lt;!-- 注意：如果使用 v-<span class="keyword">for</span> 迭代数字的话，前面的count值从<span class="number">1</span>开始 --&gt;</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">&quot;count in 10&quot;</span>&gt;</span> 第&#123;&#123; count &#125;&#125;次循环<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">data</span>: &#123;&#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">methods</span>: &#123;&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<h3 id="v-for循环中key值的使用"><a class="markdownIt-Anchor" href="#v-for循环中key值的使用">#</a> v-for 循环中 key 值的使用</h3>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=<span class="string">&quot;app&quot;</span>&gt;</span><br><span class="line">        &lt;div&gt;</span><br><span class="line">            &lt;label&gt;Id:</span><br><span class="line">                &lt;input type=&quot;text&quot; v-model=&#x27;id&#x27;&gt;</span><br><span class="line">            &lt;/label&gt;</span><br><span class="line"></span><br><span class="line">            &lt;label&gt;Name:</span><br><span class="line">                &lt;input type=&quot;text&quot; v-model=&#x27;name&#x27;&gt;</span><br><span class="line">            &lt;/label&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line"></span><br><span class="line">        &lt;input type=&quot;button&quot; value=&quot;添加&quot; @click=&#x27;add&#x27;&gt;</span><br><span class="line"></span><br><span class="line">        &lt;!-- 注意：v-for 循环的时候，key属性 只能使用number获取string --&gt;</span><br><span class="line">        &lt;!-- 注意：key 在使用的时候，必须使用v-bind:属性绑定形式，指定key的值 --&gt;</span><br><span class="line">        &lt;!-- 在组件中，使用v-for循环的时候，或者在一些特殊的情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的字符串/数字 类型 :key值 --&gt;</span><br><span class="line"></span><br><span class="line">        &lt;p v-for=&#x27;item in list&#x27; :key=&#x27;item.id&#x27;&gt;</span><br><span class="line">            &lt;input type=&quot;checkbox&quot;&gt;&#123;&#123; item.id &#125;&#125;, &#123;&#123; item.name &#125;&#125;</span><br><span class="line">        &lt;/p&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        var vm = new Vue(&#123;</span><br><span class="line">            el:&#x27;#app&#x27;,</span><br><span class="line">            data:&#123;</span><br><span class="line">                id: &#x27;&#x27;,</span><br><span class="line">                name: &#x27;&#x27;,</span><br><span class="line">                list: [</span><br><span class="line">                    &#123;id: 1,name:&#x27;李斯&#x27;&#125;,</span><br><span class="line">                    &#123;id: 2,name:&#x27;嬴政&#x27;&#125;,</span><br><span class="line">                    &#123;id: 3,name:&#x27;赵高&#x27;&#125;,</span><br><span class="line">                    &#123;id: 4,name:&#x27;付晓晨&#x27;&#125;,</span><br><span class="line">                ]</span><br><span class="line">            &#125;,</span><br><span class="line">            methods:&#123;</span><br><span class="line">                add()&#123;</span><br><span class="line"></span><br><span class="line">                    //从开头加入</span><br><span class="line">                    this.list.unshift(&#123;id: this.id,name: this.name&#125;);</span><br><span class="line">                    //从末尾加入</span><br><span class="line">                    // this.list.push(&#123;id: this.id,name: this.name&#125;);</span><br><span class="line"></span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h2 id="v-if-和v-show的区别"><a class="markdownIt-Anchor" href="#v-if-和v-show的区别">#</a> v-if 和 v-show 的区别</h2>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">&lt;div id=<span class="string">&quot;app&quot;</span>&gt;</span><br><span class="line"></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;taggle&quot;</span> @<span class="attr">click</span>=<span class="string">&#x27;flag=!flag&#x27;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="comment">&lt;!-- v-if的特点：每次都会重新删除或创建元素 --&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="comment">&lt;!-- v-show 的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的display:none样式 --&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">    <span class="comment">&lt;!-- v-if 有较高的切换性能消耗 --&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="comment">&lt;!-- v-show 有较高的初始渲染消耗 --&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">    <span class="comment">&lt;!-- 如果元素涉及到频繁的切换，最好不要使用 v-if,而是推荐使用 v-show --&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="comment">&lt;!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if --&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h4</span> <span class="attr">v-if</span>=<span class="string">flag</span>&gt;</span>这是v-if控制的元素<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h4</span> <span class="attr">v-show</span>=<span class="string">flag</span>&gt;</span>这是v-show控制的元素<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">el</span>:<span class="string">&#x27;#app&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">data</span>:&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="attr">flag</span>: <span class="literal">true</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="attr">methods</span>:&#123;&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<h2 id="品牌列表案例"><a class="markdownIt-Anchor" href="#品牌列表案例">#</a> 品牌列表案例</h2>
<h3 id="添加功能"><a class="markdownIt-Anchor" href="#添加功能">#</a> 添加功能</h3>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">add</span>(<span class="params"></span>)&#123;</span><br><span class="line">                   <span class="comment">//分析</span></span><br><span class="line">                   <span class="comment">//1.直接从data中获取到id和name</span></span><br><span class="line">                   <span class="comment">//2.组织成一个对象</span></span><br><span class="line">                   <span class="comment">//3.把这个对象调用数组的相关方法，添加到当前data中的list中</span></span><br><span class="line">                   <span class="comment">//4.注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了data中的数据,Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上。</span></span><br><span class="line">                   <span class="keyword">var</span> car = &#123;<span class="attr">id</span>: <span class="variable language_">this</span>.<span class="property">id</span>,<span class="attr">name</span>: <span class="variable language_">this</span>.<span class="property">name</span>,<span class="title class_">Ctime</span>: <span class="keyword">new</span> <span class="title class_">Date</span>()&#125;</span><br><span class="line">                   <span class="variable language_">this</span>.<span class="property">list</span>.<span class="title function_">push</span>(car);</span><br><span class="line">                   <span class="variable language_">this</span>.<span class="property">id</span> = <span class="variable language_">this</span>.<span class="property">name</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line">     &#125;,</span><br></pre></td></tr></table></figure>
<h3 id="删除功能"><a class="markdownIt-Anchor" href="#删除功能">#</a> 删除功能</h3>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">del</span>(<span class="params">id</span>)&#123;</span><br><span class="line">                    <span class="comment">//分析</span></span><br><span class="line">                    <span class="comment">//1.如何根据id，找到要删除这一项的索引</span></span><br><span class="line">                    <span class="comment">//2.如果找到索引，直接调用数组的splice方法</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">                    <span class="comment">//删除操作的第一种方式</span></span><br><span class="line">                    <span class="comment">//在数组的some方法中，如果return true,就会立即终止list的后续循环</span></span><br><span class="line">                    <span class="comment">// this.list.some((item,i) =&gt;&#123;</span></span><br><span class="line">                    <span class="comment">//     if(item.id==id)&#123;</span></span><br><span class="line">                    <span class="comment">//         this.list.splice(i,1);</span></span><br><span class="line">                    <span class="comment">//         return true;</span></span><br><span class="line">                    <span class="comment">//     &#125;</span></span><br><span class="line">                    <span class="comment">// &#125;)</span></span><br><span class="line"></span><br><span class="line">                    <span class="comment">//删除操作的第二种方式</span></span><br><span class="line">                    <span class="keyword">var</span> index = <span class="variable language_">this</span>.<span class="property">list</span>.<span class="title function_">findIndex</span>(<span class="function"><span class="params">item</span> =&gt;</span>&#123;</span><br><span class="line">                        <span class="keyword">if</span>(item.<span class="property">id</span> == id)&#123;</span><br><span class="line">                            <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">                        &#125;</span><br><span class="line">                    &#125;)</span><br><span class="line"></span><br><span class="line">                    <span class="variable language_">this</span>.<span class="property">list</span>.<span class="title function_">splice</span>(index,<span class="number">1</span>);</span><br><span class="line">                &#125;,</span><br></pre></td></tr></table></figure>
<h3 id="查询功能"><a class="markdownIt-Anchor" href="#查询功能">#</a> 查询功能</h3>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">search</span>(<span class="params">keywords</span>)&#123;</span><br><span class="line"></span><br><span class="line">                   <span class="comment">//查询的第一种操作</span></span><br><span class="line">               <span class="comment">//     var newList = [];</span></span><br><span class="line">               <span class="comment">//     this.list.forEach(item =&gt;&#123;</span></span><br><span class="line">                   <span class="comment">//indexOf方法中如果不等于-1，则说明则name中包含关键字keywords</span></span><br><span class="line">               <span class="comment">//         if(item.name.indexOf(keywords)!=-1)&#123;</span></span><br><span class="line">               <span class="comment">//             newList.push(item);</span></span><br><span class="line">               <span class="comment">//         &#125;</span></span><br><span class="line"></span><br><span class="line">               <span class="comment">//     &#125;)</span></span><br><span class="line">               <span class="comment">//     return newList;</span></span><br><span class="line">               <span class="comment">// &#125;</span></span><br><span class="line"></span><br><span class="line">               <span class="comment">//注意：ES6中，为字符串提供一个新方法，叫做 String.prototype.includes(&quot;要包含的字符串&quot;)</span></span><br><span class="line">               <span class="comment">//如果包含，则返回true,否则返回false;</span></span><br><span class="line"></span><br><span class="line">               <span class="comment">//查询的第二种操作</span></span><br><span class="line">                   <span class="keyword">var</span> newList = <span class="variable language_">this</span>.<span class="property">list</span>.<span class="title function_">filter</span>(<span class="function"><span class="params">item</span> =&gt;</span>&#123;</span><br><span class="line">                   <span class="keyword">if</span>(item.<span class="property">name</span>.<span class="title function_">includes</span>(keywords))&#123;</span><br><span class="line">                       <span class="keyword">return</span> item;</span><br><span class="line">                   &#125;</span><br><span class="line">                   </span><br><span class="line">               &#125;)</span><br><span class="line">               <span class="keyword">return</span> newList;</span><br><span class="line">           &#125;</span><br><span class="line">           &#125;,</span><br></pre></td></tr></table></figure>
<h3 id="过滤器的使用"><a class="markdownIt-Anchor" href="#过滤器的使用">#</a> 过滤器的使用</h3>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=<span class="string">&quot;app&quot;</span>&gt;</span><br><span class="line">      <span class="language-xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; msg | msgFormat(&#x27;疯狂&#x27;) &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line">  &lt;/div&gt;</span><br><span class="line"></span><br><span class="line">  &lt;script&gt;</span><br><span class="line">      <span class="comment">// Vue.filter(&#x27;msgFormat&#x27;,function(msg)&#123;</span></span><br><span class="line">      <span class="comment">//     //字符串的replace方法，第一个参数，除了可写字符串也可以写一个正则 g是全局</span></span><br><span class="line">      <span class="comment">//     return msg.replace(/单纯/g,&#x27;邪恶&#x27;)</span></span><br><span class="line">      <span class="comment">// &#125;)</span></span><br><span class="line">      <span class="title class_">Vue</span>.<span class="title function_">filter</span>(<span class="string">&#x27;msgFormat&#x27;</span>,<span class="keyword">function</span>(<span class="params">msg,arg</span>)&#123;</span><br><span class="line">          <span class="comment">//字符串的replace方法，第一个参数，除了可写字符串也可以写一个正则 g是全局</span></span><br><span class="line">          <span class="keyword">return</span> msg.<span class="title function_">replace</span>(<span class="regexp">/单纯/g</span>,arg)</span><br><span class="line">      &#125;)</span><br><span class="line"></span><br><span class="line">      <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">          <span class="attr">el</span>:<span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">          <span class="attr">data</span>:&#123;</span><br><span class="line">              <span class="attr">msg</span>:<span class="string">&quot;我是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人。&quot;</span></span><br><span class="line">          &#125;,</span><br><span class="line">          <span class="attr">methods</span>:&#123;&#125;</span><br><span class="line">      &#125;)</span><br></pre></td></tr></table></figure>
<h3 id="时间显示的优化"><a class="markdownIt-Anchor" href="#时间显示的优化">#</a> 时间显示的优化</h3>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;td&gt;&#123;&#123;item.<span class="property">Ctime</span> | <span class="title function_">dataFormat</span>(<span class="string">&#x27;&#x27;</span>)&#125;&#125;&lt;/td&gt; </span><br><span class="line"></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">filter</span>(<span class="string">&#x27;dataFormat&#x27;</span>,<span class="keyword">function</span>(<span class="params">dataStr,pattern</span>)&#123;</span><br><span class="line">            <span class="keyword">var</span> dt = <span class="keyword">new</span> <span class="title class_">Date</span>(dataStr);</span><br><span class="line">            <span class="keyword">var</span> y = dt.<span class="title function_">getFullYear</span>();</span><br><span class="line">            <span class="keyword">var</span> m = dt.<span class="title function_">getMonth</span>()+<span class="number">1</span>;</span><br><span class="line">            <span class="keyword">var</span> d = dt.<span class="title function_">getDate</span>();</span><br><span class="line"></span><br><span class="line">            <span class="keyword">if</span>(pattern.<span class="title function_">toLowerCase</span>() ===<span class="string">&#x27;yyyy-mm-dd&#x27;</span>)&#123;</span><br><span class="line">                <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;y&#125;</span>-<span class="subst">$&#123;m&#125;</span>-<span class="subst">$&#123;d&#125;</span>`</span>;</span><br><span class="line">            &#125;<span class="keyword">else</span>&#123;</span><br><span class="line"></span><br><span class="line">                <span class="keyword">var</span> hh = dt.<span class="title function_">getHours</span>();</span><br><span class="line">                <span class="keyword">var</span> mm = dt.<span class="title function_">getMinutes</span>();</span><br><span class="line">                <span class="keyword">var</span> ss = dt.<span class="title function_">getSeconds</span>();</span><br><span class="line">                <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;y&#125;</span>-<span class="subst">$&#123;m&#125;</span>-<span class="subst">$&#123;d&#125;</span> <span class="subst">$&#123;hh&#125;</span>:<span class="subst">$&#123;mm&#125;</span>:<span class="subst">$&#123;ss&#125;</span>`</span></span><br><span class="line">            &#125;</span><br><span class="line">           </span><br><span class="line">        &#125;)</span><br></pre></td></tr></table></figure>
<h3 id="自定义过滤器"><a class="markdownIt-Anchor" href="#自定义过滤器">#</a> 自定义过滤器</h3>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"> &lt;div id=<span class="string">&quot;app2&quot;</span>&gt;</span><br><span class="line">     <span class="language-xml"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>   &#123;&#123; dt | dataFormat&#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line">    &lt;/div&gt; </span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//如何定义一个私有的过滤器（局部）</span></span><br><span class="line"><span class="keyword">var</span>  vm2 = <span class="keyword">new</span>  <span class="title class_">Vue</span>(&#123;</span><br><span class="line">           <span class="attr">el</span>:<span class="string">&#x27;#app2&#x27;</span>,</span><br><span class="line">           <span class="attr">data</span>:&#123;</span><br><span class="line">               <span class="attr">dt</span>: <span class="keyword">new</span> <span class="title class_">Date</span>()</span><br><span class="line">           &#125; ,</span><br><span class="line">           <span class="attr">filters</span>:&#123;<span class="comment">//定义私有过滤器  过滤器有两个条件【过滤器名称   和  私有函数】</span></span><br><span class="line"></span><br><span class="line">            <span class="comment">//过滤器调用的时候，采用的是就近原则如果私有过滤器和全局过滤器名称一致，这时候优先调用私有过滤器</span></span><br><span class="line">               <span class="attr">dataFormat</span>: <span class="keyword">function</span>(<span class="params">dataStr,pattern = <span class="string">&quot;&quot;</span></span>)&#123;</span><br><span class="line">                <span class="keyword">var</span> dt = <span class="keyword">new</span> <span class="title class_">Date</span>(dataStr);</span><br><span class="line">            <span class="keyword">var</span> y = dt.<span class="title function_">getFullYear</span>();</span><br><span class="line">            <span class="keyword">var</span> m = (dt.<span class="title function_">getMonth</span>()+<span class="number">1</span>).<span class="title function_">toString</span>().<span class="title function_">padStart</span>(<span class="number">2</span>,<span class="string">&#x27;0&#x27;</span>);</span><br><span class="line">            <span class="keyword">var</span> d = dt.<span class="title function_">getDate</span>().<span class="title function_">toString</span>().<span class="title function_">padStart</span>(<span class="number">2</span>,<span class="string">&#x27;0&#x27;</span>);</span><br><span class="line"></span><br><span class="line">            <span class="keyword">if</span>(pattern.<span class="title function_">toLowerCase</span>() ===<span class="string">&#x27;yyyy-mm-dd&#x27;</span>)&#123;</span><br><span class="line">                <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;y&#125;</span>-<span class="subst">$&#123;m&#125;</span>-<span class="subst">$&#123;d&#125;</span>`</span>;</span><br><span class="line">            &#125;<span class="keyword">else</span>&#123;</span><br><span class="line"></span><br><span class="line">                <span class="keyword">var</span> hh = dt.<span class="title function_">getHours</span>().<span class="title function_">toString</span>().<span class="title function_">padStart</span>(<span class="number">2</span>,<span class="string">&#x27;0&#x27;</span>);</span><br><span class="line">                <span class="keyword">var</span> mm = dt.<span class="title function_">getMinutes</span>().<span class="title function_">toString</span>().<span class="title function_">padStart</span>(<span class="number">2</span>,<span class="string">&#x27;0&#x27;</span>);</span><br><span class="line">                <span class="keyword">var</span> ss = dt.<span class="title function_">getSeconds</span>().<span class="title function_">toString</span>().<span class="title function_">padStart</span>(<span class="number">2</span>,<span class="string">&#x27;0&#x27;</span>);</span><br><span class="line">                <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;y&#125;</span>-<span class="subst">$&#123;m&#125;</span>-<span class="subst">$&#123;d&#125;</span> <span class="subst">$&#123;hh&#125;</span>:<span class="subst">$&#123;mm&#125;</span>:<span class="subst">$&#123;ss&#125;</span>····`</span></span><br><span class="line">            &#125;</span><br><span class="line">           </span><br><span class="line"></span><br><span class="line">               &#125;</span><br><span class="line">           &#125;</span><br><span class="line">       &#125;)</span><br></pre></td></tr></table></figure>
<h3 id="绑定键盘敲击事件"><a class="markdownIt-Anchor" href="#绑定键盘敲击事件">#</a> 绑定键盘敲击事件</h3>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- keyup是键盘敲击事件 enter是键盘名称 --&gt;</span><br><span class="line">                   &lt;!-- 若键盘名称没有提供，keyup后可以加上对应的键盘码 --&gt;</span><br><span class="line">                   <span class="language-xml"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">class</span>=<span class="string">&quot;form-control&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;name&quot;</span> @<span class="attr">keyup.f2</span>=<span class="string">&#x27;add&#x27;</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//自定义全局案件修饰符</span></span><br><span class="line">        <span class="comment">//113对应的f2的键盘码</span></span><br><span class="line">        <span class="title class_">Vue</span>.<span class="property">config</span>.<span class="property">keyCodes</span>.<span class="property">f2</span>= <span class="number">113</span>;</span><br></pre></td></tr></table></figure>
<h3 id="自动获取焦点"><a class="markdownIt-Anchor" href="#自动获取焦点">#</a> 自动获取焦点</h3>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">&lt;input type=<span class="string">&quot;text&quot;</span> <span class="keyword">class</span>=<span class="string">&quot;form-control&quot;</span> v-model=<span class="string">&quot;keywords&quot;</span> id=<span class="string">&#x27;search&#x27;</span> v-focus&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//使用 Vue.directive() 定义全局的指令 v-focus</span></span><br><span class="line">        <span class="comment">//其中：参数1： 指令的名称，注意，在定义的时候，指令名称前面，不需要加 v-前缀，</span></span><br><span class="line">        <span class="comment">//但是： 在调用的时候，必须在指令名称前，加上v-前缀 来进行调用</span></span><br><span class="line">        <span class="comment">//参数2： 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作</span></span><br><span class="line"></span><br><span class="line">        <span class="title class_">Vue</span>.<span class="title function_">directive</span>(<span class="string">&#x27;focus&#x27;</span>,&#123;</span><br><span class="line">            <span class="attr">bind</span>: <span class="keyword">function</span>(<span class="params">el</span>)&#123;<span class="comment">// 每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次</span></span><br><span class="line">                <span class="comment">//注意：每当函数中，第一个参数，永远是el，表示被绑定了指令的那个元素，这个el参数，是一个原生的JS对象</span></span><br><span class="line">                <span class="comment">//在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候，调用focus方法没有作用</span></span><br><span class="line">                <span class="comment">//因为，一个元素，只是插入DOM之后，才能获得焦点</span></span><br><span class="line">                <span class="comment">//el.focus()</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="attr">inserted</span>: <span class="keyword">function</span>(<span class="params">el</span>)&#123;</span><br><span class="line">                el.<span class="title function_">focus</span>()</span><br><span class="line"></span><br><span class="line">            &#125;,<span class="comment">//inserted 表示元素 插入到DOM中的时候，会执行inserted函数【触发一次 】</span></span><br><span class="line"></span><br><span class="line">           </span><br><span class="line">            <span class="attr">updated</span>: <span class="keyword">function</span>(<span class="params">el</span>)&#123;&#125;<span class="comment">//当VNode更新的时候，会执行updated,可能会触发多次</span></span><br><span class="line">        &#125;)</span><br></pre></td></tr></table></figure>
<h3 id="定义字体颜色全局的"><a class="markdownIt-Anchor" href="#定义字体颜色全局的">#</a> 定义字体颜色（全局的）</h3>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;input type=<span class="string">&quot;text&quot;</span> <span class="keyword">class</span>=<span class="string">&quot;form-control&quot;</span> v-model=<span class="string">&quot;keywords&quot;</span> id=<span class="string">&#x27;search&#x27;</span> v-focus v-color = <span class="string">&quot;&#x27;blue&#x27;&quot;</span>&gt;</span><br><span class="line">    </span><br><span class="line">      <span class="comment">//自定义一个设置字体颜色的 指令</span></span><br><span class="line">     <span class="title class_">Vue</span>.<span class="title function_">directive</span>(<span class="string">&#x27;color&#x27;</span>,&#123;</span><br><span class="line">         <span class="comment">//样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去这个元素肯定有了个内联的样式</span></span><br><span class="line">         <span class="comment">//将来元素肯定会显示到页面中去，这时候，浏览器的渲染引擎必然会解析样式 应用给这个元素</span></span><br><span class="line">         <span class="attr">bind</span>: <span class="keyword">function</span>(<span class="params">el,binding</span>)&#123;</span><br><span class="line">             <span class="comment">//el.style.color = &#x27;red&#x27;;</span></span><br><span class="line">            <span class="comment">// console.log(binding.name)</span></span><br><span class="line"></span><br><span class="line">             el.<span class="property">style</span>.<span class="property">color</span> = binding.<span class="property">value</span>;</span><br><span class="line">         &#125;</span><br><span class="line">     &#125;)</span><br></pre></td></tr></table></figure>
<h3 id="自定义字体大小私有的"><a class="markdownIt-Anchor" href="#自定义字体大小私有的">#</a> 自定义字体大小（私有的）</h3>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;h3 v-color=<span class="string">&quot;&#x27;pink&#x27;&quot;</span> v-fontweight=<span class="string">&quot;1000&quot;</span> v-fontsize=<span class="string">&#x27;50&#x27;</span>&gt;   &#123;&#123; dt | dataFormat&#125;&#125;&lt;/h3&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span>  vm2 = <span class="keyword">new</span>  <span class="title class_">Vue</span>(&#123;</span><br><span class="line">           <span class="attr">el</span>:<span class="string">&#x27;#app2&#x27;</span>,</span><br><span class="line">           <span class="attr">data</span>:&#123;</span><br><span class="line">               <span class="attr">dt</span>: <span class="keyword">new</span> <span class="title class_">Date</span>()</span><br><span class="line">           &#125; ,</span><br><span class="line"></span><br><span class="line"><span class="attr">directives</span>: &#123;<span class="comment">//自定义私有指令</span></span><br><span class="line">               <span class="string">&#x27;fontweight&#x27;</span>:&#123;</span><br><span class="line">                   <span class="attr">bind</span>: <span class="keyword">function</span> (<span class="params">el,binding</span>)&#123;</span><br><span class="line">                       el.<span class="property">style</span>.<span class="property">fontWeight</span> = binding.<span class="property">value</span></span><br><span class="line">                   &#125;</span><br><span class="line">               &#125;,</span><br><span class="line">               <span class="string">&#x27;fontsize&#x27;</span>:<span class="keyword">function</span>(<span class="params">el,binding</span>)&#123;</span><br><span class="line">                    <span class="comment">//注意：这个function等同于把代码写到了bind和update中去</span></span><br><span class="line">                       el.<span class="property">style</span>.<span class="property">fontSize</span> =<span class="built_in">parseInt</span>( binding.<span class="property">value</span>)+<span class="string">&#x27;px&#x27;</span>;</span><br><span class="line">                   </span><br><span class="line">               &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h2 id="vue-resource的基本使用"><a class="markdownIt-Anchor" href="#vue-resource的基本使用">#</a> vue-resource 的基本使用</h2>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=<span class="string">&quot;./lib/vue-resource.js&quot;</span>&gt;&lt;/script&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">            <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">            <span class="attr">data</span>:&#123;&#125;,</span><br><span class="line">            <span class="attr">methods</span>:&#123;</span><br><span class="line">                <span class="title function_">getInfo</span>(<span class="params"></span>)&#123;<span class="comment">//发起get请求</span></span><br><span class="line">                    <span class="comment">//当发起get请求之后，通过.then来设置成功的回调函数</span></span><br><span class="line">                    <span class="variable language_">this</span>.<span class="property">$http</span>.<span class="title function_">get</span>(<span class="string">&#x27;http://vue.studyit.io/api/getlunbo&#x27;</span>).<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params">result</span>)&#123;</span><br><span class="line">                        <span class="variable language_">console</span>.<span class="title function_">log</span>(result)</span><br><span class="line">                    &#125;)</span><br><span class="line"></span><br><span class="line">                &#125;,</span><br><span class="line">                <span class="title function_">postInfo</span>(<span class="params"></span>)&#123;<span class="comment">//发起post请求，</span></span><br><span class="line">                    <span class="comment">//手动发起Post请求，默认没有表单格式，所以，有的服务器处理不了</span></span><br><span class="line">                    <span class="comment">//通过post方法的第三个参数，&#123; emulateJOSN: true &#125;设置提交的内容类型为普通表单格式类型</span></span><br><span class="line"></span><br><span class="line">                    <span class="variable language_">this</span>.<span class="property">$http</span>.<span class="title function_">post</span>(<span class="string">&#x27;http://vue.studyit.io/api/post&#x27;</span>,&#123;&#125;,&#123; <span class="attr">emulateJOSN</span>:<span class="literal">true</span> &#125;).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span>&#123;</span><br><span class="line">                        <span class="variable language_">console</span>.<span class="title function_">log</span>(result.<span class="property">body</span>);</span><br><span class="line">                    &#125;)</span><br><span class="line">                &#125;,</span><br><span class="line">                <span class="title function_">jsonpInfo</span>(<span class="params"></span>)&#123;</span><br><span class="line">                    <span class="variable language_">this</span>.<span class="property">$http</span>.<span class="title function_">jsonp</span>(<span class="string">&#x27;http://vue.studyit.io/api/jsonp&#x27;</span>).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span>&#123;</span><br><span class="line">                        <span class="variable language_">console</span>.<span class="title function_">log</span>(result.<span class="property">body</span>)</span><br><span class="line">                    &#125;)</span><br><span class="line">                &#125;</span><br><span class="line"></span><br><span class="line">            &#125;,</span><br><span class="line">        &#125;)</span><br></pre></td></tr></table></figure>
<h2 id="vue全局配置路径"><a class="markdownIt-Anchor" href="#vue全局配置路径">#</a> vue 全局配置（路径）</h2>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line">script&gt;</span><br><span class="line">      <span class="comment">//如果我们通过了全局配置了，请求的数据接口根域名，则在每次单独发起http请求的时候，请求的url路径，应该以相对路径开头，前面不带/,否则不会启用根路径作拼接</span></span><br><span class="line">      <span class="title class_">Vue</span>.<span class="property">http</span>.<span class="property">options</span>.<span class="property">root</span> = <span class="string">&#x27;http://vue.studyit.io/&#x27;</span></span><br><span class="line">      <span class="keyword">var</span> vm = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">          <span class="attr">el</span>:<span class="string">&quot;#app&quot;</span>,</span><br><span class="line">          <span class="attr">data</span>:&#123;</span><br><span class="line">              <span class="attr">msg</span>:<span class="string">&quot;aaaa&quot;</span>,</span><br><span class="line">             <span class="attr">name</span>:<span class="string">&quot;&quot;</span>,</span><br><span class="line">             <span class="attr">list</span>: [</span><br><span class="line">                 &#123;<span class="attr">id</span>: <span class="number">1</span>,<span class="attr">name</span>: <span class="string">&quot;五菱荣光&quot;</span>,<span class="attr">ctime</span>: <span class="keyword">new</span> <span class="title class_">Date</span>()&#125;,</span><br><span class="line">                 &#123;<span class="attr">id</span>: <span class="number">2</span>,<span class="attr">name</span>: <span class="string">&quot;众泰&quot;</span>,<span class="attr">ctime</span>: <span class="keyword">new</span> <span class="title class_">Date</span>()&#125;,</span><br><span class="line">                 &#123;<span class="attr">id</span>: <span class="number">3</span>,<span class="attr">name</span>: <span class="string">&quot;奔驰&quot;</span>,<span class="attr">ctime</span>: <span class="keyword">new</span> <span class="title class_">Date</span>()&#125;</span><br><span class="line">             ]</span><br><span class="line">              </span><br><span class="line">          &#125;,</span><br><span class="line">          <span class="attr">methods</span>:&#123;</span><br><span class="line">              <span class="title function_">add</span>(<span class="params"></span>)&#123;<span class="comment">//添加品牌列表到后台服务器</span></span><br><span class="line">                  <span class="variable language_">this</span>.<span class="property">$http</span>.<span class="title function_">post</span>(<span class="string">&#x27;api/addproduct&#x27;</span>,&#123; <span class="attr">name</span>: <span class="variable language_">this</span>.<span class="property">name</span> &#125;,&#123;<span class="attr">emulateJSON</span>: <span class="literal">true</span>&#125;</span><br><span class="line">                  ).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span>&#123;</span><br><span class="line">                      <span class="keyword">if</span>(result.<span class="property">body</span>.<span class="property">status</span> ===<span class="number">0</span>)&#123;</span><br><span class="line">                          <span class="comment">//成功了</span></span><br><span class="line">                          <span class="comment">//添加 完成后，只需要手动调用一下getAllList就能刷新品牌列表了</span></span><br><span class="line">                          <span class="variable language_">this</span>.<span class="title function_">getAllList</span>()</span><br><span class="line">                          <span class="comment">//清空name</span></span><br><span class="line">                          <span class="variable language_">this</span>.<span class="property">name</span> =<span class="string">&#x27;&#x27;</span></span><br><span class="line">                      &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">                          <span class="comment">//失败了</span></span><br><span class="line">                          <span class="title function_">alert</span>(<span class="string">&#x27;添加失败 ！&#x27;</span>)</span><br><span class="line">                      &#125;</span><br><span class="line">                  &#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">              &#125;,</span><br><span class="line">              <span class="title function_">del</span>(<span class="params">id</span>)&#123;<span class="comment">//删除品牌列表</span></span><br><span class="line">              <span class="variable language_">this</span>.<span class="property">$http</span>.<span class="title function_">get</span>(<span class="string">&quot;api/delproduct/&quot;</span> + id).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span>&#123;</span><br><span class="line">                  <span class="keyword">if</span>(result.<span class="property">body</span>.<span class="property">status</span> ===<span class="number">0</span>)&#123;</span><br><span class="line">                      <span class="comment">//删除成功</span></span><br><span class="line">                      <span class="variable language_">this</span>.<span class="title function_">getAllList</span>();</span><br><span class="line">                  &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">                      <span class="title function_">alert</span>(<span class="string">&#x27;删除失败!&#x27;</span>)</span><br><span class="line">                  &#125;</span><br><span class="line">              &#125;)</span><br><span class="line"></span><br><span class="line">              &#125;,</span><br><span class="line">              <span class="title function_">create</span>(<span class="params"></span>)&#123;</span><br><span class="line">                  <span class="variable language_">this</span>.<span class="title function_">getAllList</span>()</span><br><span class="line">              &#125;,</span><br><span class="line"></span><br><span class="line">              <span class="title function_">getAllList</span>(<span class="params"></span>)&#123;<span class="comment">//获取所有的品牌列表</span></span><br><span class="line">                  <span class="comment">//分析</span></span><br><span class="line">                  <span class="comment">//1.由于已经导入了Vue-resource这个包，所有，可以直接通过 this.$http来发起数据请求</span></span><br><span class="line">                  <span class="comment">//2.根据接口API文档，知道，获取列表的时候，应该发起一个get请求</span></span><br><span class="line">                  <span class="comment">//3.this.$http.get(&#x27;url&#x27;).then(function(result)&#123;&#125;)</span></span><br><span class="line">                  <span class="comment">//4.当通过then指定回调函数之后,在回调函数中，可以拿到数据服务器返回的   result</span></span><br><span class="line">                  <span class="comment">//5.先判断result.status 是否等于0，如果等于0，就成功了，可以把result.message赋值给this.list;如果不等于0，可以弹框提醒,获取 数据失败！</span></span><br><span class="line">                  <span class="variable language_">this</span>.<span class="property">$http</span>.<span class="title function_">get</span>(<span class="string">&#x27;api/getprodlist&#x27;</span>).<span class="title function_">then</span>(<span class="function"><span class="params">result</span> =&gt;</span>&#123;</span><br><span class="line">                     <span class="comment">//注意：通过$http获取到的数据，都在result.body中放着</span></span><br><span class="line">                      <span class="keyword">var</span> result = result.<span class="property">body</span></span><br><span class="line">                      <span class="keyword">if</span>(result.<span class="property">status</span> ===<span class="number">0</span>)&#123;</span><br><span class="line">                          <span class="comment">//成功了</span></span><br><span class="line">                          <span class="variable language_">this</span>.<span class="property">list</span> = result.<span class="property">message</span></span><br><span class="line">                      &#125;</span><br><span class="line">                      <span class="comment">//失败了</span></span><br><span class="line">                      <span class="title function_">alert</span>(<span class="string">&#x27;获取数据失败！&#x27;</span>)</span><br><span class="line">                  &#125;)</span><br><span class="line"></span><br><span class="line">              &#125;</span><br><span class="line">          &#125;</span><br><span class="line">      &#125;);</span><br><span class="line">    &lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h2 id="使用过度类实现动画"><a class="markdownIt-Anchor" href="#使用过度类实现动画">#</a> 使用过度类实现动画</h2>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br></pre></td><td class="code"><pre><span class="line">&lt;!<span class="variable constant_">DOCTYPE</span> html&gt;</span><br><span class="line">&lt;html lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;</span><br><span class="line">    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;/title&gt;</span><br><span class="line">    &lt;script src=&quot;./lib/vue.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        /* v-enter【这是个时间点】是进入之前，元素的起始状态，此时 还没有开始进入 */</span><br><span class="line">        /* v-leave-to【这是个时间点】是动画离开之后，离开的终止状态，此时，元素动画已经结束了 */</span><br><span class="line">        .v-enter,</span><br><span class="line">        .v-leave-to&#123;</span><br><span class="line">            opacity: 0;</span><br><span class="line">            transform: translateX(150px);</span><br><span class="line">        &#125;</span><br><span class="line">        /* v-enter-active【入场动画的时间段】 */</span><br><span class="line">        /* v-leave-active【离场动画的时间段】 */</span><br><span class="line">        .v-enter-active,</span><br><span class="line">        .v-leave-active&#123;</span><br><span class="line">            transition: all 0.8s ease;</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        .my-enter,</span><br><span class="line">        .my-leave-to&#123;</span><br><span class="line">            opacity: 0;</span><br><span class="line">            transform: translateY(150px);</span><br><span class="line">        &#125;</span><br><span class="line">        /* v-enter-active【入场动画的时间段】 */</span><br><span class="line">        /* v-leave-active【离场动画的时间段】 */</span><br><span class="line">        .my-enter-active,</span><br><span class="line">        .my-leave-active&#123;</span><br><span class="line">            transition: all 0.8s ease;</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    &lt;div id=&quot;app&quot;&gt;</span><br><span class="line"></span><br><span class="line">        &lt;input type=&quot;button&quot; value=&quot;toggle&quot; @click=&quot;flag=!flag&quot;&gt;</span><br><span class="line">        &lt;!-- 需求：点击按钮，让h3显示，再点击，让h3隐藏 --&gt;</span><br><span class="line">        &lt;!-- 1.使用 transition元素，把需要被动画控制的元素，包裹起来 --&gt;</span><br><span class="line">        &lt;!-- transition元素，是Vue官方提供的 --&gt;</span><br><span class="line"></span><br><span class="line">        &lt;transition&gt;</span><br><span class="line">            &lt;h3 v-if=&quot;flag&quot;&gt;这是H3&lt;/h3&gt;</span><br><span class="line">        &lt;/transition&gt;</span><br><span class="line"></span><br><span class="line">        &lt;hr&gt;</span><br><span class="line"></span><br><span class="line">        &lt;input type=&quot;button&quot; value=&quot;toggle2&quot; @click=&quot;flag2=!flag2&quot;&gt;</span><br><span class="line">        &lt;!-- 需求：点击按钮，让h3显示，再点击，让h3隐藏 --&gt;</span><br><span class="line">        &lt;!-- 1.使用 transition元素，把需要被动画控制的元素，包裹起来 --&gt;</span><br><span class="line">        &lt;!-- transition元素，是Vue官方提供的 --&gt;</span><br><span class="line"></span><br><span class="line">        &lt;transition name=&quot;my&quot;&gt;</span><br><span class="line">            &lt;h5 v-if=&quot;flag2&quot;&gt;这是H5&lt;/h5&gt;</span><br><span class="line">        &lt;/transition&gt;</span><br><span class="line">        </span><br><span class="line">    &lt;/div&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        var vm = new Vue(&#123;</span><br><span class="line">            el:&#x27;#app&#x27;,</span><br><span class="line">            data:&#123;</span><br><span class="line">                flag: false,</span><br><span class="line">                flag2:false</span><br><span class="line">            &#125;,</span><br><span class="line">            methods:&#123;&#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">    </span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<h2 id="animatecss设置入场和出场动画效果"><a class="markdownIt-Anchor" href="#animatecss设置入场和出场动画效果">#</a> animate.css 设置入场和出场动画效果</h2>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;link rel=<span class="string">&quot;stylesheet&quot;</span> href=<span class="string">&quot;./lib/animate.css&quot;</span>&gt;</span><br><span class="line">    </span><br><span class="line">    </span><br><span class="line">       </span><br><span class="line">     &lt;!-- 需求：点击按钮，让h3显示，再点击，让h3隐藏 --&gt;</span><br><span class="line">    &lt;!-- <span class="language-xml"><span class="tag">&lt;<span class="name">transition</span> <span class="attr">enter-active-class</span>=<span class="string">&quot;animated bounceIn&quot;</span> <span class="attr">leave-active-class</span>=<span class="string">&quot;animated bounceOut&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">h2</span> <span class="attr">v-if</span>=<span class="string">&quot;flag&quot;</span>&gt;</span>这是H3<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span> --&gt;</span><br><span class="line"></span><br><span class="line">    &lt;!-- <span class="language-xml"><span class="tag">&lt;<span class="name">transition</span> <span class="attr">enter-active-class</span>=<span class="string">&quot;bounceIn&quot;</span> <span class="attr">leave-active-class</span>=<span class="string">&quot;bounceOut&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">h2</span> <span class="attr">v-if</span>=<span class="string">&quot;flag&quot;</span> <span class="attr">class</span>=<span class="string">&quot;animated&quot;</span>&gt;</span>这是H3<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span></span><br><span class="line">    &lt;/div&gt; --&gt;</span><br><span class="line"></span><br><span class="line">    &lt;!-- :duration=<span class="string">&quot;毫秒值&quot;</span>来统一设置入场和离场时候的动画时长 --&gt;</span><br><span class="line">        &lt;!-- <span class="language-xml"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">value</span>=<span class="string">&quot;toggle&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;flag=!flag&quot;</span> <span class="attr">:duration</span>=<span class="string">&quot;200&quot;</span>&gt;</span> --&gt;</span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml"><span class="comment">&lt;!-- :duration=&quot;&#123; enter: 200,leave: 400&#125;&quot; 分别设置入场和离场的时长 --&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">transition</span> <span class="attr">enter-active-class</span>=<span class="string">&quot;bounceIn&quot;</span> <span class="attr">leave-active-class</span>=<span class="string">&quot;bounceOut&quot;</span> <span class="attr">:duration</span>=<span class="string">&quot;&#123; enter: 200,leave: 400&#125;&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">h2</span> <span class="attr">v-if</span>=<span class="string">&quot;flag&quot;</span> <span class="attr">class</span>=<span class="string">&quot;animated&quot;</span>&gt;</span>这是H3<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<h2 id="列表动画效果"><a class="markdownIt-Anchor" href="#列表动画效果">#</a> 列表动画效果</h2>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br></pre></td><td class="code"><pre><span class="line">&lt;!<span class="variable constant_">DOCTYPE</span> html&gt;</span><br><span class="line">&lt;html lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;</span><br><span class="line">    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;/title&gt;</span><br><span class="line">    &lt;script src=&quot;./lib/vue.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        li&#123;</span><br><span class="line">            border: 1px dashed #999;</span><br><span class="line">            margin: 5px;</span><br><span class="line">            line-height: 35px;</span><br><span class="line">            padding-left: 5px;</span><br><span class="line">            font-size: 12px;</span><br><span class="line">            width: 100%;</span><br><span class="line">        &#125;</span><br><span class="line">        li:hover&#123;</span><br><span class="line">            background-color: hotpink;</span><br><span class="line">            transition: all 0.4s ease;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        .v-enter,</span><br><span class="line">        .v-leave-to&#123;</span><br><span class="line">            opacity: 0;</span><br><span class="line">            transform: translateY(80px);</span><br><span class="line">        &#125;</span><br><span class="line">        .v-enter-active,</span><br><span class="line">        .v-leave-active&#123;</span><br><span class="line">            transition: all 0.6s ease;</span><br><span class="line">        &#125;</span><br><span class="line">        /* 下面的 .v-move 和.v-leave-active配合使用，能够实现列表后续的元素，渐渐的飘上来的效果*/</span><br><span class="line">        .v-move&#123;</span><br><span class="line">            transition: all 0.6s ease;</span><br><span class="line">        &#125;</span><br><span class="line">        .v-leave-active&#123;</span><br><span class="line">            position: absolute;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line"></span><br><span class="line">    &lt;div id=&quot;app&quot;&gt;</span><br><span class="line"></span><br><span class="line">        &lt;div&gt;</span><br><span class="line">            &lt;label&gt;</span><br><span class="line">                id:</span><br><span class="line">                &lt;input type=&quot;text&quot; v-model=&quot;id&quot;&gt;</span><br><span class="line">            &lt;/label&gt;</span><br><span class="line">            &lt;label&gt;</span><br><span class="line">                name:</span><br><span class="line">                &lt;input type=&quot;text&quot; v-model=&quot;name&quot;&gt;</span><br><span class="line">            &lt;/label&gt;</span><br><span class="line">            &lt;input type=&quot;button&quot; value=&quot;添加&quot; @click=&quot;add&quot;&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line"></span><br><span class="line">        &lt;!-- &lt;ul&gt; --&gt;</span><br><span class="line">            &lt;!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for循环渲染出来的，不能使用</span><br><span class="line">            transition 包裹，需要使用 transitionGroup --&gt;</span><br><span class="line">            &lt;!-- 如果要为v-for 循环创建的元素设置动画，必须为每个元素设置:key属性 --&gt;</span><br><span class="line">            &lt;!-- 给transition-group添加appear属性，实现入场时候的效果 --&gt;</span><br><span class="line">            &lt;!-- 通过为 transition-group元素，设置tag属性，指定transition-group渲染为指定的元素</span><br><span class="line">            ，如果不指定tag属性，默认渲染为span标签--&gt;</span><br><span class="line">            &lt;transition-group appear tag=&quot;ul&quot;&gt;</span><br><span class="line">                </span><br><span class="line">               &lt;li v-for=&quot;(item,i) in list&quot; :key=&quot;item.id&quot; @click=&quot;del(i)&quot;&gt;</span><br><span class="line">                &#123;&#123;item.id&#125;&#125; --- &#123;&#123;item.name&#125;&#125;</span><br><span class="line">               &lt;/li&gt;</span><br><span class="line">            &lt;/transition-group&gt;</span><br><span class="line">        &lt;!-- &lt;/ul&gt; --&gt;</span><br><span class="line">        </span><br><span class="line"></span><br><span class="line">    &lt;/div&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        var vm = new Vue(&#123;</span><br><span class="line">            el:&quot;#app&quot;,</span><br><span class="line">            data:&#123;</span><br><span class="line">                id:&#x27;&#x27;,</span><br><span class="line">                name:&#x27;&#x27;,</span><br><span class="line">                list:[</span><br><span class="line">                    &#123;id:1, name:&quot;秦会&quot;&#125;,</span><br><span class="line">                    &#123;id:2, name:&quot;赵高&quot;&#125;,</span><br><span class="line">                    &#123;id:3, name:&quot;魏无忌&quot;&#125;,</span><br><span class="line">                    &#123;id:4, name:&quot;蓝忘机&quot;&#125;</span><br><span class="line">                ]</span><br><span class="line">            &#125;,</span><br><span class="line">            methods:&#123;</span><br><span class="line">                add()&#123;</span><br><span class="line">                    this.list.push(&#123;id: this.id,name: this.name&#125;)</span><br><span class="line">                    this.id = this.name = &#x27;&#x27;;</span><br><span class="line">                &#125;,</span><br><span class="line">                del(i)&#123;</span><br><span class="line"></span><br><span class="line">                    this.list.splice(i,1)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">    </span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<h2 id="创建组件方法"><a class="markdownIt-Anchor" href="#创建组件方法">#</a> 创建组件方法</h2>
<h3 id="方式一"><a class="markdownIt-Anchor" href="#方式一">#</a> 方式一</h3>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=<span class="string">&quot;app&quot;</span>&gt;</span><br><span class="line">       &lt;!-- 如果要使用组件，直接把组件的名称，以<span class="variable constant_">HTML</span>标签的形式，引入到页面中，即可 --&gt;</span><br><span class="line">       <span class="language-xml"><span class="tag">&lt;<span class="name">my-Coml</span>&gt;</span><span class="tag">&lt;/<span class="name">my-Coml</span>&gt;</span></span></span><br><span class="line">       </span><br><span class="line">   &lt;/div&gt;</span><br><span class="line"></span><br><span class="line">   &lt;script&gt;</span><br><span class="line">       // 1.1使用Vue.extend来创建全局的Vue组件</span><br><span class="line">       var coml = Vue.extend(&#123;</span><br><span class="line">           template: &#x27;&lt;h3&gt;这是使用 Vue.extend创建的组件&lt;h3&gt;&#x27;//通过template属性，指定了组件要展示的HTML结构</span><br><span class="line"></span><br><span class="line">       &#125;)</span><br><span class="line">       // 1.2 使用Vue.component(&#x27;组件的名称&#x27;，创建出来的组件模板对象)</span><br><span class="line">       </span><br><span class="line">       // Vue.component(&#x27;myComl&#x27;,coml)</span><br><span class="line">       // 如果使用Vue.component定义全局组件的时候，组件名称使用了驼峰命名，则在引用组件的时候，需要把大写的驼峰改成小写字母，同时，两个单词之间，使用-连接</span><br><span class="line">       var vm = new Vue(&#123;</span><br><span class="line">           el:&quot;#app&quot;,</span><br><span class="line">           data:&#123;&#125;,</span><br><span class="line">           methods:&#123;&#125;</span><br><span class="line">       &#125;)</span><br><span class="line">   &lt;/script&gt;</span><br></pre></td></tr></table></figure>

  </div>

   <footer>

    <div class="meta">
  <span class="item">
    <span class="icon">
      <i class="ic i-calendar-check"></i>
    </span>
    <span class="text">更新于</span>
    <time title="修改时间：2021-11-24 16:26:42" itemprop="dateModified" datetime="2021-11-24T16:26:42+08:00">2021-11-24</time>
  </span>
  <span id="2021/11/17/vue.js/" class="item leancloud_visitors" data-flag-title="Vue" title="阅读次数">
      <span class="icon">
        <i class="ic i-eye"></i>
      </span>
      <span class="text">阅读次数</span>
      <span class="leancloud-visitors-count"></span>
      <span class="text">次</span>
  </span>
</div>

      
<div class="reward">
  <button><i class="ic i-heartbeat"></i> 赞赏</button>
  <p>请我喝[茶]~(￣▽￣)~*</p>
  <div id="qr">
      
      <div>
        <img data-src="/fu-xiaochen/images/wechatpay.png" alt="John Doe 微信支付">
        <p>微信支付</p>
      </div>
      
      <div>
        <img data-src="/fu-xiaochen/images/alipay.png" alt="John Doe 支付宝">
        <p>支付宝</p>
      </div>
      
      <div>
        <img data-src="/fu-xiaochen/images/paypal.png" alt="John Doe 贝宝">
        <p>贝宝</p>
      </div>
  </div>
</div>

      

<div id="copyright">
<ul>
  <li class="author">
    <strong>本文作者： </strong>付晓晨 <i class="ic i-at"><em>@</em></i>小付博客
  </li>
  <li class="link">
    <strong>本文链接：</strong>
    <a href="http://fu-xiaochen1.gitee.io/fu-xiaochen/2021/11/17/vue.js/" title="Vue">http://fu-xiaochen1.gitee.io/fu-xiaochen/2021/11/17/vue.js/</a>
  </li>
  <li class="license">
    <strong>版权声明： </strong>本站所有文章除特别声明外，均采用 <span class="exturl" data-url="aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LW5jLXNhLzQuMC9kZWVkLnpo"><i class="ic i-creative-commons"><em>(CC)</em></i>BY-NC-SA</span> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

  </footer>

</article>

  </div>
  

<div class="post-nav">
    <div class="item left">
      

  <a href="/fu-xiaochen/2021/10/15/nginx/" itemprop="url" rel="prev" data-background-image="https:&#x2F;&#x2F;tva2.sinaimg.cn&#x2F;mw690&#x2F;6833939bly1gicljitigmj20zk0m87fp.jpg" title="nginx">
  <span class="type">上一篇</span>
  <span class="category"><i class="ic i-flag"></i> </span>
  <h3>nginx</h3>
  </a>

    </div>
    <div class="item right">
      

  <a href="/fu-xiaochen/2022/02/08/hello-world/" itemprop="url" rel="next" data-background-image="https:&#x2F;&#x2F;tva2.sinaimg.cn&#x2F;mw690&#x2F;6833939bly1gipevarprfj20zk0m8npd.jpg" title="小付编程">
  <span class="type">下一篇</span>
  <span class="category"><i class="ic i-flag"></i> </span>
  <h3>小付编程</h3>
  </a>

    </div>
</div>

  
  <div class="wrap" id="comments"></div>


        </div>
        <div id="sidebar">
          

<div class="inner">

  <div class="panels">
    <div class="inner">
      <div class="contents panel pjax" data-title="文章目录">
          <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#vuejs"><span class="toc-number">1.</span> <span class="toc-text"> vue.js</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFvuejs"><span class="toc-number">1.1.</span> <span class="toc-text"> 什么是 vue.js</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E5%AD%A6%E4%B9%A0%E6%B5%81%E8%A1%8C%E6%A1%86%E6%9E%B6"><span class="toc-number">1.2.</span> <span class="toc-text"> 为什么要学习流行框架</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A1%86%E6%9E%B6%E5%92%8C%E5%BA%93%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">1.3.</span> <span class="toc-text"> 框架和库的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#mvc%E5%92%8Cmvvm%E8%A7%86%E5%9B%BE%E8%AE%B2%E8%A7%A3%E5%9B%BE"><span class="toc-number">1.4.</span> <span class="toc-text"> MVC 和 MVVM 视图讲解图</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue%E4%B8%ADmvvm%E5%9F%BA%E6%9C%AC%E4%BB%A3%E7%A0%81"><span class="toc-number">1.5.</span> <span class="toc-text"> vue 中 MVVM 基本代码</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#v-cloalv-text-v-html%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">1.5.1.</span> <span class="toc-text"> v-cloal,v-text ,v-html 的使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#v-bind-vue%E6%8F%90%E4%BE%9B%E7%9A%84%E5%B1%9E%E6%80%A7%E7%BB%91%E5%AE%9A%E6%9C%BA%E5%88%B6-%E7%BC%A9%E5%86%99%E4%B8%BA"><span class="toc-number">1.5.2.</span> <span class="toc-text"> v-bind vue 提供的属性绑定机制   缩写为 ：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#v-on-%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A%E6%9C%BA%E5%88%B6%E7%BC%A9%E5%86%99"><span class="toc-number">1.5.3.</span> <span class="toc-text"> v-on: 事件绑定机制缩写：@</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#v-model%E5%AE%9E%E7%8E%B0%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A"><span class="toc-number">1.5.4.</span> <span class="toc-text"> v-model 实现数据的双向绑定</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B7%91%E9%A9%AC%E7%81%AF%E6%95%88%E6%9E%9C%E6%BA%90%E7%A0%81"><span class="toc-number">1.6.</span> <span class="toc-text"> 跑马灯效果源码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6"><span class="toc-number">1.7.</span> <span class="toc-text"> 事件修饰符</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AE%80%E5%8D%95%E8%AE%A1%E7%AE%97%E5%99%A8"><span class="toc-number">1.8.</span> <span class="toc-text"> 简单计算器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue-%E6%A0%B7%E5%BC%8F"><span class="toc-number">1.9.</span> <span class="toc-text"> vue 样式</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#vue%E6%A0%B7%E5%BC%8F%E4%B8%80"><span class="toc-number">1.9.1.</span> <span class="toc-text"> vue 样式一</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#vue%E6%A0%B7%E5%BC%8F%E4%BA%8C"><span class="toc-number">1.9.2.</span> <span class="toc-text"> vue 样式二</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#v-for%E7%9A%84%E5%9B%9B%E7%A7%8D%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F"><span class="toc-number">1.10.</span> <span class="toc-text"> v-for 的四种使用方式</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#v-for%E5%BE%AA%E7%8E%AF%E6%99%AE%E9%80%9A%E6%95%B0%E7%BB%84"><span class="toc-number">1.10.1.</span> <span class="toc-text"> v-for 循环普通数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#v-for-%E5%BE%AA%E7%8E%AF%E5%AF%B9%E8%B1%A1%E6%95%B0%E7%BB%84"><span class="toc-number">1.10.2.</span> <span class="toc-text"> v-for 循环对象数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#v-for-%E5%BE%AA%E7%8E%AF%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.10.3.</span> <span class="toc-text"> v-for 循环对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#v-for-%E6%95%B0%E5%AD%97%E7%9A%84%E8%BF%AD%E4%BB%A3"><span class="toc-number">1.10.4.</span> <span class="toc-text"> v-for 数字的迭代</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#v-for%E5%BE%AA%E7%8E%AF%E4%B8%ADkey%E5%80%BC%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">1.10.5.</span> <span class="toc-text"> v-for 循环中 key 值的使用</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#v-if-%E5%92%8Cv-show%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">1.11.</span> <span class="toc-text"> v-if 和 v-show 的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%93%81%E7%89%8C%E5%88%97%E8%A1%A8%E6%A1%88%E4%BE%8B"><span class="toc-number">1.12.</span> <span class="toc-text"> 品牌列表案例</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B7%BB%E5%8A%A0%E5%8A%9F%E8%83%BD"><span class="toc-number">1.12.1.</span> <span class="toc-text"> 添加功能</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%A0%E9%99%A4%E5%8A%9F%E8%83%BD"><span class="toc-number">1.12.2.</span> <span class="toc-text"> 删除功能</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9F%A5%E8%AF%A2%E5%8A%9F%E8%83%BD"><span class="toc-number">1.12.3.</span> <span class="toc-text"> 查询功能</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%87%E6%BB%A4%E5%99%A8%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">1.12.4.</span> <span class="toc-text"> 过滤器的使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%97%B6%E9%97%B4%E6%98%BE%E7%A4%BA%E7%9A%84%E4%BC%98%E5%8C%96"><span class="toc-number">1.12.5.</span> <span class="toc-text"> 时间显示的优化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E6%BB%A4%E5%99%A8"><span class="toc-number">1.12.6.</span> <span class="toc-text"> 自定义过滤器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%91%E5%AE%9A%E9%94%AE%E7%9B%98%E6%95%B2%E5%87%BB%E4%BA%8B%E4%BB%B6"><span class="toc-number">1.12.7.</span> <span class="toc-text"> 绑定键盘敲击事件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%8A%A8%E8%8E%B7%E5%8F%96%E7%84%A6%E7%82%B9"><span class="toc-number">1.12.8.</span> <span class="toc-text"> 自动获取焦点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9A%E4%B9%89%E5%AD%97%E4%BD%93%E9%A2%9C%E8%89%B2%E5%85%A8%E5%B1%80%E7%9A%84"><span class="toc-number">1.12.9.</span> <span class="toc-text"> 定义字体颜色（全局的）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%AD%97%E4%BD%93%E5%A4%A7%E5%B0%8F%E7%A7%81%E6%9C%89%E7%9A%84"><span class="toc-number">1.12.10.</span> <span class="toc-text"> 自定义字体大小（私有的）</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue-resource%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-number">1.13.</span> <span class="toc-text"> vue-resource 的基本使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vue%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE%E8%B7%AF%E5%BE%84"><span class="toc-number">1.14.</span> <span class="toc-text"> vue 全局配置（路径）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E8%BF%87%E5%BA%A6%E7%B1%BB%E5%AE%9E%E7%8E%B0%E5%8A%A8%E7%94%BB"><span class="toc-number">1.15.</span> <span class="toc-text"> 使用过度类实现动画</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#animatecss%E8%AE%BE%E7%BD%AE%E5%85%A5%E5%9C%BA%E5%92%8C%E5%87%BA%E5%9C%BA%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C"><span class="toc-number">1.16.</span> <span class="toc-text"> animate.css 设置入场和出场动画效果</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%97%E8%A1%A8%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C"><span class="toc-number">1.17.</span> <span class="toc-text"> 列表动画效果</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%E7%BB%84%E4%BB%B6%E6%96%B9%E6%B3%95"><span class="toc-number">1.18.</span> <span class="toc-text"> 创建组件方法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%B9%E5%BC%8F%E4%B8%80"><span class="toc-number">1.18.1.</span> <span class="toc-text"> 方式一</span></a></li></ol></li></ol></li></ol>
      </div>
      <div class="related panel pjax" data-title="系列文章">
      </div>
      <div class="overview panel" data-title="站点概览">
        <div class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <img class="image" itemprop="image" alt="John Doe"
      data-src="/fu-xiaochen/images/avatar.jpg">
  <p class="name" itemprop="name">John Doe</p>
  <div class="description" itemprop="description"></div>
</div>

<nav class="state">
    <div class="item posts">
      <a href="/fu-xiaochen/archives/">
        <span class="count">4</span>
        <span class="name">文章</span>
      </a>
    </div>
</nav>

<div class="social">
      <span class="exturl item github" data-url="aHR0cHM6Ly9naXRodWIuY29tL3lvdXJuYW1l" title="https:&#x2F;&#x2F;github.com&#x2F;yourname"><i class="ic i-github"></i></span>
      <span class="exturl item twitter" data-url="aHR0cHM6Ly90d2l0dGVyLmNvbS95b3VybmFtZQ==" title="https:&#x2F;&#x2F;twitter.com&#x2F;yourname"><i class="ic i-twitter"></i></span>
      <span class="exturl item zhihu" data-url="aHR0cHM6Ly93d3cuemhpaHUuY29tL3Blb3BsZS95b3VybmFtZQ==" title="https:&#x2F;&#x2F;www.zhihu.com&#x2F;people&#x2F;yourname"><i class="ic i-zhihu"></i></span>
      <span class="exturl item music" data-url="aHR0cHM6Ly9tdXNpYy4xNjMuY29tLyMvdXNlci9ob21lP2lkPXlvdXJpZA==" title="https:&#x2F;&#x2F;music.163.com&#x2F;#&#x2F;user&#x2F;home?id&#x3D;yourid"><i class="ic i-cloud-music"></i></span>
      <span class="exturl item weibo" data-url="aHR0cHM6Ly93ZWliby5jb20veW91cm5hbWU=" title="https:&#x2F;&#x2F;weibo.com&#x2F;yourname"><i class="ic i-weibo"></i></span>
      <span class="exturl item about" data-url="aHR0cHM6Ly9hYm91dC5tZS95b3VybmFtZQ==" title="https:&#x2F;&#x2F;about.me&#x2F;yourname"><i class="ic i-address-card"></i></span>
</div>

<ul class="menu">
  
    
  <li class="item">
    <a href="/fu-xiaochen/" rel="section"><i class="ic i-home"></i>首页</a>
  </li>

    
  <li class="item">
    <a href="/fu-xiaochen/about/" rel="section"><i class="ic i-user"></i>关于</a>
  </li>

        
  <li class="item dropdown">
      <a href="javascript:void(0);"><i class="ic i-feather"></i>文章</a>
    <ul class="submenu">

        
  <li class="item">
    <a href="/fu-xiaochen/archives/" rel="section"><i class="ic i-list-alt"></i>归档</a>
  </li>

        
  <li class="item">
    <a href="/fu-xiaochen/categories/" rel="section"><i class="ic i-th"></i>分类</a>
  </li>

        
  <li class="item">
    <a href="/fu-xiaochen/tags/" rel="section"><i class="ic i-tags"></i>标签</a>
  </li>

  </ul>

</ul>

      </div>
    </div>
  </div>

  <ul id="quick">
    <li class="prev pjax">
        <a href="/fu-xiaochen/2021/10/15/nginx/" rel="prev" title="上一篇"><i class="ic i-chevron-left"></i></a>
    </li>
    <li class="up"><i class="ic i-arrow-up"></i></li>
    <li class="down"><i class="ic i-arrow-down"></i></li>
    <li class="next pjax">
        <a href="/fu-xiaochen/2022/02/08/hello-world/" rel="next" title="下一篇"><i class="ic i-chevron-right"></i></a>
    </li>
    <li class="percent"></li>
  </ul>
</div>


        </div>
        <div class="dimmer"></div>
      </div>
    </main>
    <footer id="footer">
      <div class="inner">
        <div class="widgets">
          
<div class="rpost pjax">
  <h2>随机文章</h2>
  <ul>
      
  <li class="item">
    
<div class="breadcrumb">
</div>

    <span><a href="/fu-xiaochen/2021/10/15/nginx/" title="nginx">nginx</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
</div>

    <span><a href="/fu-xiaochen/2022/02/08/swagger/" title="Swagger">Swagger</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
</div>

    <span><a href="/fu-xiaochen/2021/11/17/vue.js/" title="Vue">Vue</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
</div>

    <span><a href="/fu-xiaochen/2022/02/08/hello-world/" title="小付编程">小付编程</a></span>
  </li>

  </ul>
</div>
<div>
  <h2>最新评论</h2>
  <ul class="leancloud-recent-comment"></ul>
</div>

        </div>
        <div class="status">
  <div class="copyright">
    
    &copy; 2010 – 
    <span itemprop="copyrightYear">2022</span>
    <span class="with-love">
      <i class="ic i-sakura rotate"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">John Doe @ Yume Shoka</span>
  </div>
  <div class="powered-by">
    基于 <span class="exturl" data-url="aHR0cHM6Ly9oZXhvLmlv">Hexo</span> & Theme.<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2FtZWhpbWUvaGV4by10aGVtZS1zaG9rYQ==">Shoka</span>
  </div>
</div>

      </div>
    </footer>
  </div>
<script data-config type="text/javascript">
  var LOCAL = {
    path: '2021/11/17/vue.js/',
    favicon: {
      show: "（●´3｀●）やれやれだぜ",
      hide: "(´Д｀)大変だ！"
    },
    search : {
      placeholder: "文章搜索",
      empty: "关于 「 ${query} 」，什么也没搜到",
      stats: "${time} ms 内找到 ${hits} 条结果"
    },
    valine: true,fancybox: true,
    copyright: '复制成功，转载请遵守 <i class="ic i-creative-commons"></i>BY-NC-SA 协议。',
    ignores : [
      function(uri) {
        return uri.includes('#');
      },
      function(uri) {
        return new RegExp(LOCAL.path+"$").test(uri);
      }
    ]
  };
</script>

<script src="https://cdn.polyfill.io/v2/polyfill.js"></script>

<script src="//cdn.jsdelivr.net/combine/npm/pace-js@1.0.2/pace.min.js,npm/pjax@0.2.8/pjax.min.js,npm/whatwg-fetch@3.4.0/dist/fetch.umd.min.js,npm/animejs@3.2.0/lib/anime.min.js,npm/algoliasearch@4/dist/algoliasearch-lite.umd.js,npm/instantsearch.js@4/dist/instantsearch.production.min.js,npm/lozad@1/dist/lozad.min.js,npm/quicklink@2/dist/quicklink.umd.js"></script>

<script src="/fu-xiaochen/js/app.js?v=0.2.5"></script>




</body>
</html>
